/*
    在大型的项目里面，一般也会使用到react-redux,它是一个类似vuex一样的，用于全局状态管理的工具

        1. 安装
            因为  react-redux 是依赖于 redux 这个第三方模块的，所以在下载的时候需要同时下载
                npm i redux react-redux 或者 yarn add redux react-redux

        2. 创建一个store , 同时提供一个reducer函数   ---   <vuex里面也需要先创建一个store>

        3. 在根组件里面使用 Provider 进行数据的共享 ， 该 Provider 是由 react-redux 提供的
            Provider 需要一个 store 属性，这个属性就是全局数据
        4. 在后代组件中，使用useSelector获取全局数据，使用useDispath得到操作的委托
            useSelector需要一个函数，该函数返回想要的数据
*/

import React from "react";
import { Provider, useDispatch, useSelector } from "react-redux";
import store from "./store";
export default function App() {
  return (
    <Provider store={store}>
      <div>App</div>
      <Parent />
    </Provider>
  );
}

function Parent() {
  const state = useSelector((state) => state);
  return (
    <div>
      <p>Parent</p>
      {/* count是从全局的store里面得到的数据 */}
      <div>从全局的sotre得到的count是 ： {state.count}</div>
      <Child />
    </div>
  );
}

function Child() {
  const count = useSelector((state) => state.count);
  //   useDispatch 可以得到操作的委托
  const dispatch = useDispatch();
  const onClick = () => {
    dispatch({
      type: "add",
      pyload: 10
    });
  };
  return (
    <div>
      <p>Child</p>
      <div>从全局的sotre得到的count是 ： {count}</div>
      <button onClick={onClick}>+1</button>
    </div>
  );
}
